<!-- <p>
  pay-home works!
  訂單ID：{{id}}
</p> -->
<div class="pay-body">
  <div class="pay-page">
    <div class="pay-page-hander">
      <div >
        <img src="../../../../assets/img/logo.png" alt="">
        <!-- <app-logo></app-logo> -->
      </div>
      <div >
        <p>收银台</p>
      </div>
      <div class="fr">
        <p><i nz-icon type="question-circle" theme="outline"></i> 付款出问题了吗？</p>
      </div>
    </div>

    <div class="pay-page-body"  >
      <div class="body-titel-c" *ngIf='pageData && !isTimerOut'>
        <div class="body-titel" nz-row>
          <div nz-col nzSpan='5' class="body-img-c">
            <img  src="{{shopLogo}}" alt="">
          </div>
          <div nz-col nzSpan='16' class="body-name-c"  >
            <p>{{pageData.data.firmName}}</p>
            <h3>{{pageData.data.orderAmount}}</h3>
          </div>
        </div>
      </div>
      
      <div *ngIf="!isClose" class="fr qrcode-c" (click)='isPayQR = !isPayQR'>
        <div *ngIf="isPayQR">
            <i nz-icon type="property-safety" theme="outline"></i>
            <div>登录<br>支付</div>
        </div>
        <div *ngIf="!isPayQR">
            <i nz-icon type="qrcode"></i>
            <div>扫码<br>支付</div>
        </div>
      </div>
      <div class="pay-form-c">

        <h3 *ngIf="!isClose">请输入您的 CHP 钱包账号支付当前的订单 {{getTimer}}</h3>
 
        <div *ngIf="!isPayQR && !isClose">
        <!-- <div > -->
          <div class="pay-tab-titel-page" nz-row>
            <div [ngClass]="{true:'active',false:''}[isEmail]" nz-col nzSpan="5" (click)="changeTab(true)">
              邮 箱
              <p  [ngClass]="{true:'form-tabs-title-active-bottom',false:''}[isEmail]" ></p>
            </div>
            <div [ngClass]="{true:'active',false:''}[!isEmail]" nz-col nzSpan="5" (click)="changeTab(false)">
              手 机
              <p  [ngClass]="{true:'form-tabs-title-active-bottom',false:''}[!isEmail]" ></p>
            </div>
          </div>
  
  
          <form [formGroup]="validateForm" >

            <div>
              <nz-form-item >
                <nz-form-label [nzSpan]="24" style="font-size: 16px;" nzRequired>支付账号</nz-form-label>

                <nz-form-control  [nzSpan]="24" nzHasFeedback *ngIf="isEmail">
                  <input nz-input type="text" formControlName="mail" placeholder="请输入邮箱"  nzRequired autocomplete="off" >
                  <nz-form-explain style="color:red" *ngIf="validateForm.get('mail').dirty&&validateForm.get('mail').errors">
                      <ng-container *ngIf="validateForm.get('mail').hasError('required')">
                        请输入邮箱
                      </ng-container>
                      <ng-container *ngIf="validateForm.get('mail').hasError('pattern')">
                        邮箱格式不正确
                      </ng-container>
                  </nz-form-explain>
                </nz-form-control>

                <nz-form-control  [nzSpan]="24" [nzValidateStatus]="validateForm.controls['phone']" *ngIf="!isEmail">

                  <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate">
                    <ng-template #addOnBeforeTemplate>
                      <nz-select formControlName="phoneNumberPrefix" style="width: 100px;" >
                        <div *ngFor="let item of regionNumbers; let i = index">
                          <nz-option nzLabel="{{item.name}}" nzValue="{{item.number}}"></nz-option>
                        </div>
                      </nz-select>
                    </ng-template>
                    <input nz-input style="width: 305px;" type="text" formControlName="phone" placeholder="请输入手机号"  nzRequired autocomplete="off" >
                  </nz-input-group>

                  <nz-form-explain style="color:red" *ngIf="validateForm.get('phone').dirty&&validateForm.get('phone').errors">
                      <ng-container *ngIf="validateForm.get('phone').hasError('required')">
                        请输入手机号
                      </ng-container>
                      <ng-container *ngIf="validateForm.get('phone').hasError('pattern')">
                        手机号格式不正确
                      </ng-container>
                  </nz-form-explain>
                </nz-form-control>

              </nz-form-item>
  
              <nz-form-item >
                <nz-form-label [nzSpan]="24" style="font-size: 16px;" nzRequired>交易密码</nz-form-label>
                <nz-form-control  [nzSpan]="24" nzHasFeedback >
                  <input nz-input maxlength="6" type="password" formControlName="fundPwd" placeholder="请输入交易密码"  nzRequired autocomplete="off" >
                  <nz-form-explain style="color:red" *ngIf="validateForm.get('fundPwd').dirty&&validateForm.get('fundPwd').errors">
                      <ng-container *ngIf="validateForm.get('fundPwd').hasError('required')">
                        请输入交易密码
                      </ng-container>
                      <ng-container *ngIf="validateForm.get('fundPwd').hasError('pattern')">
                        密码格式不正确
                      </ng-container>
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>
            </div>

    
            </form>
            <p>忘记交易密码?</p>
            <button nz-button [disabled]="!validateForm.valid" nzType="primary" (click)="handleOk(validateForm.value)" nzBlock >确认</button>
            
          </div>
          
          <div class="ewm" *ngIf="isPayQR">
            <qrcode  [qrdata]="pageData.data.paramsUrl" [size]="230" [level]="'Q'"></qrcode>
            <p>使用钱包 APP 扫二维码进行支付</p>
          </div>
          
          <div class="pay-close" *ngIf="isClose" >

            <div *ngIf="!isTimerOut">
              <div>
                  <img src="../../../../assets/img/success.png" alt="">
              </div>
              <p>支付成功</p>
            </div>
            <!-- <div *ngIf="towPayclose">
              <div>
                  <img src="../../../../assets/img/success.png" alt="">
              </div>
              <p>支付成功</p>
            </div> -->

            <div class="pay-close" *ngIf="isTimerOut && !towPayclose">
              <img src="../../../../assets/img/timeOut.png" alt=""> 訂單超時啦！！！！
            </div>

            <button nz-button [disabled]="!validateForm.valid" nzType="primary"  nzBlock >返回商家</button>


          </div>

      </div>
    </div>

    <div class="pay-page-foor">
        <span > Copyright © 2019 Aoot Inc. 保留所有权利。隐私政策 | 使用条款 | 销售政策 | 法律信息 | 网站地图 </span><br _ngcontent-c3=""><span _ngcontent-c3=""> 京公安网安备 1101050258978 京ICP备10215996 营业执照 </span>
    </div>

  </div>

</div>
